<template>
  <el-dialog v-model="visible" width="800">
    <el-form ref="formRef" label-width="80" :model="model">
      <el-form-item label="头像" prop="headImg">
        <AvatarUpload v-model="model.headImg" />
      </el-form-item>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="model.name" placeholder="请输入姓名" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="昵称" prop="nickName">
            <el-input v-model="model.nickName" placeholder="请输入昵称" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="model.username" placeholder="请输入用户名" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="密码" prop="password">
            <el-input v-model="model.password" placeholder="请输入密码" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="角色" prop="roleIdList">
        <el-select v-model="model.roleIdList" multiple :multiple-limit="3">
          <el-option
            v-for="role in roleList"
            :key="role.id"
            :label="role.name"
            :value="role.id"
          />
        </el-select>
      </el-form-item>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="model.phone" placeholder="请输入手机号" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="model.email" placeholder="请输入邮箱" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="备注" prop="remark">
        <el-input
          v-model="model.remark"
          type="textarea"
          rows="4"
          placeholder="请输入备注"
        />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="model.status">
          <el-radio :label="1">开启</el-radio>
          <el-radio :label="0">关闭</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>

    <template #footer>
      <el-space>
        <el-button type="default" @click="handleCancel">取消</el-button>
        <el-button type="success" @click="handleConfirm">保存</el-button>
      </el-space>
    </template>
  </el-dialog>
</template>

<script>
import AvatarUpload from "@/components/avatar-upload/index.vue";
import { addSysUser, getSysRoleList, updateSysUser } from "@/api/sys.js";
import { ElMessage } from "element-plus";

export default {
  name: "Upsert",
  components: { AvatarUpload },
  emits: ["success"],
  data() {
    return {
      visible: false,
      roleList: [], // 角色列表数据
      // 表单数据对象
      model: {
        id: undefined, // 用户Id
        headImg: "", // 头像地址
        name: "", // 姓名
        nickName: "", // 昵称
        username: "", // 用户名
        password: "", // 密码
        roleIdList: [], // 角色Id列表
        departmentId: 1, // 部门Id
        phone: "", // 手机号
        email: "", // 邮箱
        remark: "", // 备注
        status: 1, // 状态
      },
    };
  },

  methods: {
    // 获取角色列表数据
    async refresh() {
      this.roleList = await getSysRoleList();
    },

    async open(row) {
      console.log("row", row);
      this.visible = true;
      await this.$nextTick();

      if (row) {
        //   编辑，数据回填
        this.model = Object.keys(this.model).reduce((result, key) => {
          result[key] = row[key];
          return result;
        }, {});
        // 单独处理 roleIdList
        //      row.roleName "111,222,333" => [8, 9, 10]
        //      1. row.roleName 转换成数组
        const roleNames = row.roleName.split(",");
        //      2. 到 roleList 中对应查找
        this.model.roleIdList = this.roleList
          .filter((item) => roleNames.includes(item.name))
          .map((item) => item.id);

        console.log("this.model", this.model);
      } else {
        //   新增，数据重置
        this.$refs.formRef.resetFields();
      }
    },

    // 保存
    async handleConfirm() {
      // 1. 表单校验
      // 2. 调用接口
      if (this.model.id) {
        // 编辑
        await updateSysUser(this.model);
      } else {
        // 新增
        await addSysUser(this.model);
      }
      // 3. 成功
      ElMessage.success("成功");
      // 4. 关闭弹窗
      this.visible = false;
      // 5. 通知父组件
      this.$emit("success");
    },

    // 取消
    handleCancel() {
      this.visible = false;
    },
  },

  created() {
    this.refresh();
  },
};
</script>
